Właściwości listy deklarujemy poleceniemselektor {list-style-type:typ }/ Właściwości ta może być ustawiona dla ul, ol, li
Dla list punktowanych przewidziane są typy: disc, circle, square, dla list uporządkowanych:decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.Styl wyłącza typ none.
Dla list uporządkowanych przewidziane są poza tym liczne typy oparte na alfabetach wschodnich lub historycznych np.:lower-greek, hebrew, armenian, georgian...
Deklaracja pozycji znacznika to właściowość list-style-position: z wartościami: inside, outside, gdzie inside ustawia punktor w pierwszej linii a outside
< ul style="list-style-image:url(css.png)">
Jeżeli zaznajomiłeś się już czytelniku bardziej szczegółowo z zagadnieniem wykazów w języku HTML, to zapewne wiesz już, że nie oferują one żadnych bardziej skomplikowanych sposobów numeracji poszczególnych punktów i podpunktów. To znaczy możliwe jest określenie np. następującego sposobu numeracji:
Punkty główne - liczby rzymskie: I, II, III,...
Podpunkty - liczby arabskie: 1, 2, 3,...
Podpunkty drugiego rzędu - litery: a, b, c,...
Co jednak zrobić, jeżeli nie odpowiada nam taki sposób numeracji punktów albo nie możemy z góry określić ile będziemy mieli poziomów zagnieżdżenia? CSS daje na to prostą receptę - automatyczną numerację, czyli możliwość dowolnego określania sposobu numerowania elementów, np.:
Punkty główne: 1., 2., 3.,...
Podpunkty: 1.1., 1.2., 1.3.,... 2.1., 2.2., 2.3.,... 3.1., 3.2., 3.3.,...
Podpunkty drugiego rzędu: 1.1.1., 1.1.2., 1.1.3.,... 1.2.1., 1.2.2., 1.2.3.,... 2.1.1., 2.1.2., 2.1.3.,... 2.2.1., 2.2.2., 2.2.3.,...
i tak dalej...
Automatyczna numeracja w CSS korzysta z tzw. liczników, które są podobne do zmiennych w językach programowania. Każdy licznik posiada swój unikalny identyfikator (nazwę), za pomocą którego można się do niego odnosić w arkuszu CSS. Dodatkowo każdy licznik przechowuje wartość, która jest liczbą określającą wartość licznika dla aktualnego punktu wykazu (1, 2, 3,...).
Zasada tworzenia automatycznej numeracji jest prosta:
Najpierw określany nazwę licznika dla danego wykazu, od razu zerując go:
Zaznacz kod Wypróbuj kod
ol { counter-reset: nazwa_licznika }
Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym:
Zaznacz kod Wypróbuj kod
ol li { list-style-type: none }
Następnie dla kolejnych punktów i podpunktów wykazu wyświetlamy
aktualną wartość licznika na początku treści, a następnie
zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu:
Zaznacz kod Wypróbuj kod
ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika }